<template>
    <v-layout>
        <div style="width: 100%;background-color: rgb(239, 239, 239);padding: 10px;">
            <div style="padding: 15px;background-color: white;">
                <span class="title">添加选修课：</span>
                <v-divider />
                <v-container style="width: 60%;height: 100%;">
                    <v-row>
                        <v-col>
                            <v-text-field variant="outlined" label="课程名称" v-model="course.name"></v-text-field>
                        </v-col>
                        <div style="width: 10%;"></div>
                        <v-col>
                            <v-select v-model="course.academy" variant="outlined" :items="academyList" label="开课学院"
                                no-data-text="无数据" item-title="name" item-value="name">
                            </v-select>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <v-text-field variant="outlined" label="授课教师" v-model="course.teacher" disabled></v-text-field>
                        </v-col>

                        <div style="width: 10%;"></div>
                        <v-col>
                            <v-text-field variant="outlined" label="预计学分" v-model="course.credit" type="number">
                            </v-text-field>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <v-text-field variant="outlined" label="授课地点" v-model="course.location"></v-text-field>
                        </v-col>
                        <div style="width: 10%;"></div>
                        <v-col>
                            <v-select v-model="course.selectedTime" chips placeholder="授课时间" variant="outlined"
                                :items="timeList" multiple single-line></v-select>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <v-select v-model="course.beginWeek" variant="outlined" :items="weekList" label="起始周">
                            </v-select>
                        </v-col>
                        <div style="width: 10%;"></div>
                        <v-col>
                            <v-select v-model="course.endWeek" variant="outlined" :items="weekList" label="结束周">
                            </v-select>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <v-text-field variant="outlined" label="平时占比" v-model="course.regularWeight" type="number"
                                @update:focused="changeWeight(true)"></v-text-field>
                        </v-col>
                        <div style="width: 10%;"></div>
                        <v-col>
                            <v-text-field variant="outlined" label="期末占比" v-model="course.finalWeight" type="number"
                                @update:focused="changeWeight(false)">
                            </v-text-field>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <v-textarea label="授课内容简介/备注(非必需)" variant="outlined" v-model="course.comment"></v-textarea>
                        </v-col>
                    </v-row>
                    <v-row justify="center">
                        <v-col cols="4" align-self="center">
                            <v-btn block color="blue" @click="releaseCourse">提交申请</v-btn>
                        </v-col>
                    </v-row>
                </v-container>
            </div>
        </div>
    </v-layout>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { useUserStore } from '@/stores';
import { ref, onMounted } from 'vue'
import { GetAcademyList } from '@/controllers/baseController';
import { message } from '@/utils/message';
import { ReleaseCourse } from '@/controllers/auditController';
const timeList = [
    '周一1~2节', '周一3~4节', '周一5~6节', '周一7~8节', '周一9~10节',
    '周二1~2节', '周二3~4节', '周二5~6节', '周二7~8节', '周二9~10节',
    '周三1~2节', '周三3~4节', '周三5~6节', '周三7~8节', '周三9~10节',
    '周四1~2节', '周四3~4节', '周四5~6节', '周四7~8节', '周四9~10节',
    '周五1~2节', '周五3~4节', '周五5~6节', '周五7~8节', '周五9~10节',
    '周六1~2节', '周六3~4节', '周六5~6节', '周六7~8节', '周六9~10节',
    '周日1~2节', '周日3~4节', '周日5~6节', '周日7~8节', '周日9~10节'
]
const weekList = Array.from({ length: 18 }, (_, index) => index + 1)
let course = reactive({
    name: '',
    location: '',
    teacher: useUserStore().name,
    credit: 1,
    selectedTime: [] as string[],
    beginWeek: 1,
    endWeek: 18,
    academy: undefined,
    comment: '',
    regularWeight: 0.4,
    finalWeight: 0.6
})
let academyList = ref([] as { name: string; id: number }[])

onMounted(() => {
    getAcademyList()
})

async function getAcademyList() {
    try {
        academyList.value = await GetAcademyList()
    }
    catch (err: any) {
        message(err.message, 'error')
    }
}
async function releaseCourse() {
    if (!verifyForm()) return
    const courseData = {
        name: course.name,
        location: course.location,
        credit: course.credit.toString(),
        academy: course.academy,
        finalWeight: course.finalWeight,
        auditId: 4,
        courseTimeList: [] as any[],
        comment: course.comment
    }
    pushFormatTime(courseData.courseTimeList)
    try {
        await ReleaseCourse(courseData)
        message('发布成功', 'success')
    }
    catch (err: any) {
        message(err.message, 'error')
    }
}
function verifyForm(): boolean {
    if (course.name === '') {
        message('课程名不能为空')
        return false
    }
    if (!course.academy) {
        message('请选择学院')
        return false
    }
    if (course.credit <= 0 || course.credit > 5 || Number.isNaN(course.credit)) {
        message('学分不符合规定')
        return false
    }
    if (course.location === '') {
        message('请选择上课教室')
        return false
    }
    if (course.selectedTime.length > 2 || course.selectedTime.length === 0) {
        message('上课时间不合规定')
        return false
    }
    if (Number.isNaN(course.finalWeight) || Number.isNaN(course.regularWeight) || (Number(course.regularWeight.toString()) + Number(course.finalWeight.toString()) !== 1)) {
        message('占比不合规定')
        return false
    }
    if (course.beginWeek > course.endWeek) {
        message('请选择正确的上课周数')
        return false
    }
    return true
}
function changeWeight(isRegular: boolean) {
    if (isRegular) {
        if (course.regularWeight <= 1 && course.regularWeight >= 0) {
            course.finalWeight = Number((1 - course.regularWeight).toFixed(1))
        }
    }
    else {
        if (course.finalWeight <= 1 && course.finalWeight >= 0) {
            course.regularWeight = Number((1 - course.finalWeight).toFixed(1))
        }
    }
}
function pushFormatTime(list: any[]) {
    const week = Array.from({ length: course.endWeek - course.beginWeek + 1 }, (_, index) => course.beginWeek + index);
    course.selectedTime.forEach((time) => {
        let day = Math.floor(timeList.indexOf(time) / 5) + 1
        let order = timeList.indexOf(time) % 5 + 1
        list.push({
            week: week,
            weekday: day,
            order: order
        })
    })
}
</script>
<style scoped>
.title {
    font-size: 18;
    font-weight: bold;
    color: #333;
    margin-right: 1%;
}
</style>